<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="navbar-title">车间生产报表</text>
    </view>

    <!-- 可滚动报表列表 -->
    <scroll-view class="report-list" scroll-y>
      <!-- 报表卡片 -->
      <view
        v-for="(report, index) in reports"
        :key="index"
        class="report-item"
        @click="goDetail(report)"
      >
        <!-- 卡片顶部：日期 & 生产数量 -->
        <view class="report-top">
          <text class="report-date">{{ report.date }}</text>
          <view class="report-production">
            <text class="production-amount">{{ report.productionAmount }}</text>
            <text class="production-label">件</text>
          </view>
        </view>
        <!-- 卡片底部：缺陷数量 -->
        <view class="report-bottom">
          <text class="report-defects">缺陷：{{ report.defects }} 件</text>
        </view>
      </view>
    </scroll-view>

    <!-- 浮动新增按钮（FAB） -->
    <button class="fab" @click="openAddForm">+</button>

    <!-- 新增报表/添加设备的弹窗 -->
    <view v-if="showAddForm" class="modal">
      <view class="modal-content">
        <text class="modal-title">添加设备 / 新增报表</text>
        
        <!-- 表单字段 -->
        <input class="modal-input" v-model="newReport.productionPlan" placeholder="请输入生产计划" />
        <input class="modal-input" v-model="newReport.productName" placeholder="请输入产品名称" />
        <input class="modal-input" v-model="newReport.workshopName" placeholder="请输入车间名称" />
        <input class="modal-input" v-model="newReport.productionDate" placeholder="请选择生产日期 (YYYY-MM-DD)" />
        <input class="modal-input" v-model="newReport.shift" placeholder="请输入班次 (如早班/中班/晚班)" />
        <input class="modal-input" type="number" v-model="newReport.quantityProduced" placeholder="请输入生产数量" />
        <input class="modal-input" type="number" v-model="newReport.qualityDefects" placeholder="请输入缺陷数量" />
        <input class="modal-input" v-model="newReport.qualityStatus" placeholder="请输入质量状态" />
        <input class="modal-input" v-model="newReport.remarks" placeholder="请输入备注" />

        <view class="modal-buttons">
          <button class="btn-submit" @click="submitReport">确定</button>
          <button class="btn-cancel" @click="cancelAdd">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reports: [],
      showAddForm: false,
      currentWorkshopId: null, // 用于存储当前车间ID
      newReport: {
        productionPlan: '',
        productName: '',
        workshopName: '',
        productionDate: '',
        shift: '',
        quantityProduced: '',
        qualityDefects: '',
        qualityStatus: '',
        remarks: ''
      }
    };
  },
  onLoad(options) {
    // 如果从上一个页面传入了 workshopId，就赋值给 currentWorkshopId
    if (options.workshopId) {
      this.currentWorkshopId = options.workshopId;
    }
    this.fetchReports();
  },
  methods: {
    // 获取报表数据，并根据当前车间ID过滤数据
    fetchReports() {
      uni.request({
        url: 'http://localhost:1003/mesEmployeeProductionReport/findList',
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.code === 200) {
            // 映射数据时确保也获取 workshopId 字段（假设返回的数据中有该字段）
            let fetchedReports = res.data.data.map(item => ({
              id: item.id,
              date: item.productionDate,
              productionAmount: item.quantityProduced,
              defects: item.qualityDefects,
              workshopId: item.workshopId
            }));
            // 如果设置了 currentWorkshopId，则过滤掉不匹配的数据
            if (this.currentWorkshopId) {
              fetchedReports = fetchedReports.filter(report => report.workshopId == this.currentWorkshopId);
            }
            this.reports = fetchedReports;
          } else {
            uni.showToast({ title: res.data.msg || '获取列表失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('请求错误：', err);
          uni.showToast({ title: '请求错误', icon: 'none' });
        }
      });
    },

    openAddForm() {
      this.showAddForm = true;
      // 重置表单数据
      this.newReport = {
        productionPlan: '',
        productName: '',
        workshopName: '',
        productionDate: '',
        shift: '',
        quantityProduced: '',
        qualityDefects: '',
        qualityStatus: '',
        remarks: ''
      };
    },

    submitReport() {
      // 简单校验必填项
      if (!this.newReport.productionPlan || !this.newReport.productName) {
        uni.showToast({ title: '请完善必填信息', icon: 'none' });
        return;
      }

      uni.request({
        url: 'http://localhost:1003/mesEmployeeProductionReport/save',
        method: 'POST',
        header: { 'Content-Type': 'application/json' },
        data: {
          planId: this.newReport.productionPlan,
          productName: this.newReport.productName,
          workshopName: this.newReport.workshopName,
          productionDate: this.newReport.productionDate,
          shift: this.newReport.shift,
          quantityProduced: parseFloat(this.newReport.quantityProduced),
          qualityDefects: parseFloat(this.newReport.qualityDefects),
          qualityStatus: this.newReport.qualityStatus,
          remarks: this.newReport.remarks
        },
        success: (res) => {
          if (res.data && res.data.code === 200) {
            uni.showToast({ title: '新增成功', icon: 'success' });
            this.showAddForm = false;
            this.fetchReports(); // 新增后刷新列表
          } else {
            uni.showToast({ title: res.data.msg || '新增失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('请求错误:', err);
          uni.showToast({ title: '请求错误', icon: 'none' });
        }
      });
    },

    cancelAdd() {
      this.showAddForm = false;
    },

    goDetail(report) {
      uni.navigateTo({
        url: `/pages/workshopUser/reportDetail/reportDetail?id=${report.id}`
      });
    }
  }
};
</script>

<style scoped>
/* 容器 */
.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  height: 100vh;
}

/* 顶部导航栏 */
.navbar {
  height: 60px;
  background-color: #1296db;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-title {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

/* 报表列表 */
.report-list {
  flex: 1;
  padding: 16px;
}
.report-item {
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 33px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.report-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.report-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.report-date {
  color: #666;
  font-size: 14px;
}
.report-production {
  display: flex;
  align-items: baseline;
}
.production-amount {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-right: 4px;
}
.production-label {
  font-size: 12px;
  color: #666;
}
.report-bottom {
  margin-top: 8px;
}
.report-defects {
  font-size: 14px;
  color: #ff5722;
}

/* 浮动按钮（FAB） */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  background-color: #1296db;
  color: #fff;
  font-size: 28px;
  border-radius: 50%;
  text-align: center;
  line-height: 56px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.fab:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal-content {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.modal-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}
.modal-input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #333;
  transition: border-color 0.2s;
}
.modal-input:focus {
  border-color: #1296db;
}
.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.btn-submit,
.btn-cancel {
  width: 48%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  transition: opacity 0.2s;
}
.btn-submit {
  background-color: #1296db;
  color: #fff;
}
.btn-cancel {
  background-color: #f0f0f0;
  color: #666;
}
.btn-submit:active,
.btn-cancel:active {
  opacity: 0.8;
}
</style>